<template>
  <div class="app-container">
    <div class="container_header">
      <el-input v-model="listQuery.name" clearable placeholder="请输入机构名称/课程名称" @keyup.enter.native="getCourseList" />
      <el-select v-model="listQuery.status" placeholder="请选择活动区域" clearable @change="getCourseList">
        <el-option label="全部" value="" />
        <el-option label="待编辑" value="1" />
        <el-option label="待上架" value="2" />
        <el-option label="已上架" value="3" />
        <el-option label="已下架" value="4" />
      </el-select>
      <el-button type="primary" size="small" @click="getCourseList">查询</el-button>
      <el-button size="small" type="primary" class="addCourseButton" @click="addCourse">新建课程</el-button>
    </div>
    <el-row>
      <el-col>
        <el-table
          ref="courseTable"
          :data="courseData"
          border
          :header-cell-style="{ background: g.mainColor }"
        >
          <el-table-column
            prop="businessName"
            label="所属机构"
            width="200"
            align="center"
          />
          <el-table-column prop="id" label="课程id" align="center" width="200" fixed />
          <el-table-column
            prop="introducePictures"
            label="课程封面"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <div class="img-cover">
                <img
                  :src="scope.row.introducePictures.split(',')[0]"
                  alt="图片加载失败"
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="课程名称" align="center" />
          <el-table-column
            prop="courseNatureName"
            label="课程类型"
            width="200"
            align="center"
          />
          <el-table-column
            prop="categoryName"
            label="课程分类"
            align="center"
          />
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              {{ g.statusName(scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="400"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                v-if="scope.row.status == 2 || scope.row.status == 4"
                size="mini"
                type="success"
                @click="handlePutOn(scope.$index, scope.row)"
              >上架</el-button>
              <el-button
                v-if="scope.row.status == 3"
                size="mini"
                type="success"
                @click="handleDismount(scope.$index, scope.row)"
              >下架</el-button>
              <el-button
                v-if="scope.row.status == 3"
                size="mini"
                type="primary"
                @click="handleQrcode(scope.$index, scope.row)"
              >课程二维码预览</el-button>
              <el-button
                v-if="
                  scope.row.status == 2 ||
                    scope.row.status == 1 ||
                    scope.row.statuse == 3 ||
                    scope.row.status == 4
                "
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 课程推广码 -->
    <el-dialog :title="qrCodeName" :visible.sync="qrDialog" width="600px">
      <el-row type="flex" justify="center">
        <el-image :src="qrCodeUrl" />
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="qrDialog = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 预览 -->
    <el-dialog
      :title="qrCodeName"
      :visible.sync="courseDetailsDialog"
      width="750px"
      center
    >
      <div v-if="courseDetails" class="courseDetails">
        <div v-html="courseDetails" />
      </div>
      <div v-else>请完善详情</div>
      <span slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button
            type="primary"
            @click="courseDetailsDialog = false"
          >关 闭</el-button>
        </el-row>
      </span>
    </el-dialog>
    <el-dialog
      title="请选择机构"
      :visible.sync="selectOrganization"
      width="800px"
      height="1000px"
    >
      <el-select
        v-model="organizationValue"
        placeholder="请选择机构"
        clearable
        filterable
        class="filter-item"
        style="width: 140px"
        @change="selectOrgId"
      >
        <el-option
          v-for="item in businessList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectOrganization = false">取 消</el-button>
        <el-button type="primary" @click="handleSelectOrg">确 定</el-button>
      </span>
    </el-dialog>
    <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="getCourseList" />
  </div>
</template>

<script>
import {
  courseList,
  coursePutOn,
  courseDown,
  QRcode,
  deleteCourse
} from '@/api/curriculum'
import { courseBusinessList } from '@/api/course'
import Pagination from '@/components/Pagination'
export default {
  name: 'CourseList',
  components: { Pagination },
  data() {
    return {
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        status: '',
        name: ''
      },
      courseDetailsDialog: false, // 课程详情
      selectOrganization: false,
      organizationValue: '',
      businessList: [],
      list: [],
      courseDetails: '',
      // 课程推广码dialog
      qrDialog: false,
      qrCodeName: '',
      qrCodeUrl: '',
      value: '',
      total: 10,
      statusOptions: [
        {
          value: null,
          lable: '全部'
        },
        {
          value: 1,
          lable: '待编辑'
        },
        {
          value: 2,
          lable: '待上架'
        },
        {
          value: 3,
          lable: '已上架'
        },
        {
          value: 4,
          lable: '已下架'
        }
      ],
      courseData: []
    }
  },
  computed: {},
  created() {
    this.getCourseList()
    this.getbusinessList()
  },
  methods: {
    selectOrgId() {
      console.log(this.organizationValue)
    },
    getbusinessList() {
      courseBusinessList().then((res) => {
        console.log(res.data)
        this.businessList = res.data
      })
    },
    handleSelectOrg() {
      if (this.organizationValue === '') { return this.$message.error('请选择机构') }
      this.$router.push({
        path: `/course/curriculum/courseAdd`,
        query: { id: this.organizationValue }
      })
    },
    addCourse() {
      this.selectOrganization = true
    },
    changeStatus() {
      this.page = 1
      this.pageSize = 10
      this.getCourseList()
    },
    // 编辑
    handleEdit(index, row) {
      this.$router.push({
        path: '/course/curriculum/courseEdit',
        query: {
          id: row.id
        }
      })
    },
    // 上架
    handlePutOn(index, row) {
      console.log(row)
      coursePutOn({
        id: row.id
      })
        .then((res) => {
          this.$message({
            type: 'success',
            message: '上架成功'
          })
          this.getCourseList()
        })
        .catch(() => {})
    },
    // 下架
    async handleDismount(index, row) {
      const confirm = await this.$confirm(
        `确认下架${row.name}课程吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {})
      if (!confirm) return
      await courseDown({
        id: row.id
      }).then((res) => {
        this.$message({
          type: 'success',
          message: '下架成功'
        })
        this.getCourseList()
      })
    },
    async handleQrcode(index, row) {
      const res = await QRcode({
        id: row.id,
        pagesPath: `pages/courseDetail/courseDetail`
      })
      const data = res.data
      if (!data) return
      if (data instanceof Object) {
        this.qrCodeUrl = data.qrcodeImg
      } else {
        this.qrCodeUrl = data
      }
      this.qrCodeName = row.name
      this.qrDialog = true
    },
    // 删除
    async handleDelete(index, row) {
      const confim = await this.$confirm('删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      console.log(confim, '.....')
      if (!confim) return
      deleteCourse({
        id: row.id
      }).then((res) => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getCourseList()
      })
    },
    // 预览
    handlePreview(index, row) {
      this.$router.push({
        path: '/course/curriculum/edit',
        query: {
          id: row.id,
          view: '1'
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getCourseList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getCourseList()
      this.$nextTick(() => {
        this.$refs.courseTable.bodyWrapper.scrollTop = 0
      })
    },
    // 获取课程分页
    getCourseList() {
      courseList(this.listQuery).then((res) => {
        this.total = res.data.total
        this.courseData = res.data.records
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container_header{
  display: flex;
  margin-bottom: 10px;
  width: 100%;
  .el-input{
    width:250px;
    margin-right: 10px;
  }
  .el-select{
    width:150px;
    margin-right: 10px;
  }
  .addCourseButton{
    margin-left: 70%;
  }
}
.el-row {
  margin-bottom: 20px;
}
/deep/.el-table .cell {
  display: flex;
  justify-content: center;
}
.img-cover {
  width: 100px;
  height: 100%;
}
.img-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/deep/.courseDetails {
  height: 600px;
  overflow: hidden;
  overflow-y: scroll;
  img {
    width: 100%;
    height: auto;
  }
}
.el-row {
  justify-content: center;
}
/deep/ .el-dialog__body .el-input {
  width: 300px;
}
</style>
